<template>
  <div class="body-c">
    <van-nav-bar @click-left="onClickLeft"
                 :title="$route.meta.title"
                 left-text="返回"
                 left-arrow>
      <template #right>
        <van-icon name="search"
                  size="18" />
      </template>
    </van-nav-bar>
    <div id="body-content"
         v-if=" state.showRouter">

      <router-view> </router-view>
      <van-tabbar sticky
                  v-model="$route.meta.name"
                  replace
                  active-color="#ee0a24"
                  inactive-color="#000"
                  @change="onChange">
        <van-tabbar-item v-for="tab in tabbaritemArr"
                         :name="tab.name"
                         :to="tab.path"
                         :key="tab.path"
                         :icon="tab.icon">{{tab.title}}</van-tabbar-item>

        <!--          <van-tabbar-item name="lifeCycle" to="/lifeCycle" icon="home-o">生命周期函数</van-tabbar-item>-->
        <!--&lt;!&ndash;          <van-tabbar-item to="/ref" icon="search">ref</van-tabbar-item>&ndash;&gt;-->
        <!--          <van-tabbar-item name="vuex" to="/vuex" icon="friends-o">vuex</van-tabbar-item>-->
        <!--          <van-tabbar-item name="teleport" to="/Teleport" icon="friends-o">Teleport</van-tabbar-item>-->
        <!--          <van-tabbar-item name="cart" to="/cart" icon="setting-o">购物车</van-tabbar-item>-->
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import { getCurrentInstance, ref, watch, reactive } from 'vue'
// import {routes} from "./router/index";//获取所有路由
import { useRouter, onBeforeRouteUpdate } from 'vue-router'
export default {
  name: 'App',
  setup() {
    // console.log(routes)//获取所有路由
    const { ctx } = getCurrentInstance()
    let active = ref('lifeCycle')
    const icons = {
      lifeCycle: 'home-o',
      vuex: 'friends-o',
      teleport: 'setting-o',
      suspense: 'apps-o',
    }

    let tabbaritemArr = ref([
      {
        name: 'lifeCycle',
        title: '生命周期函数',
        path: '/lifeCycle',
        icon: icons.lifeCycle,
      },
      { name: 'vuex', title: 'vuex', path: '/vuex', icon: icons.vuex },
      {
        name: 'teleport',
        title: 'teleport',
        path: '/teleport',
        icon: icons.teleport,
      },
      {
        name: 'suspense',
        title: '异步组件',
        path: '/suspense',
        icon: icons.suspense,
      },
    ])

    const onChange = (index) => {
      console.log(index)
    }
    const state = reactive({
      showRouter: true,
    })
    // function reload() {
    //   state.showRouter = false
    //   ctx.$nextTick(() => {
    //     state.showRouter = true
    //   })
    // }
    // 通过watch来监听
    // let route = useRouter();
    // onBeforeRouteUpdate(to=>{
    //   console.log('to :>> ', to);
    // })
    // watch(()=>route.currentRoute.value.meta.name, (newValue, oldValue) => {
    //   active=newValue||"vuex";
    //   ctx.$router.push("/"+active)
    //   console.log(active,"active")
    // }, { immediate: true })
    const onClickLeft = () => {
      history.go(-1)
      // active=ctx.$route.meta.name ;
      // reload()
      console.log(ctx)
      // ctx.$router.push( ctx.$route.href)
    }

    return {
      onClickLeft,
      onChange,
      active,
      tabbaritemArr,
      state,
    }
  },
}
</script>

<style scoped>
* {
  padding: 0px;
  margin: 0px;
}
.body-c {
  height: calc(100% - 50px);
  width: 100%;
  overflow: auto;
}
#body-content {
  /*position: fixed;*/
  /*top: 46px;*/
  /*width: 100%;*/
  /*bottom: 0px;*/
  /*overflow: hidden;*/
}

.v-enter {
  opacity: 0;
  transform: translateX(100%);
}

.v-leave-to {
  opacity: 0;
  transform: translateX(-100%);
  position: absolute;
}

.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
</style>